<template>
    <el-dialog v-model="detailsData.visible" :title="detailsData.title" center width="30%" top="10vh" :close-on-click-modal="false">
        <div class="dialog-content">

            <div class="flex row" v-if="detailsData.item.userInfo">
                <div class="label">红方选手：</div>
                <div class="value">{{ detailsData.item.userInfo.nickname }}</div>
            </div>

            <div class="flex row" v-if="detailsData.item.opponentInfo">
                <div class="label">蓝方选手：</div>
                <div class="value">{{ detailsData.item.opponentInfo.nickname }}</div>
            </div>

            <div class="flex row" v-if="detailsData.item.scoreResult">
                <div class="label">总比分：</div>
                <div class="value flex">
                    <el-tag type="danger">{{ detailsData.item.scoreResult.a }}</el-tag>
                    <span style="margin:0 5px">:</span>
                    <el-tag type="primary">{{ detailsData.item.scoreResult.b }}</el-tag>
                </div>
            </div>

            <div class="flex row" v-if="detailsData.item.ruleInfo">
                <div class="label">赛制：</div>
                <div class="value">{{ detailsData.item.ruleInfo.label }}</div>
            </div>

            <el-table :data="detailsData.item.scoreList" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" align="center" width="100"/>
                <el-table-column prop="a" label="红方选手" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.a }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="b" label="蓝方选手" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.b }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>


<script setup>
import { nextTick, reactive, useTemplateRef } from 'vue'
import { ElMessage } from 'element-plus'

const emits = defineEmits(['update'])
defineExpose({ openDialog })
const formRef = useTemplateRef('formRef')
const detailsData = reactive({
    type: 'add',
    visible: false,
    item: {}
})

/**
 * 打开弹框
 * @param type
 * @param item
 */
function openDialog (type, item) {
    detailsData.title = '比赛详情'
    detailsData.visible = true
    nextTick(() => {
        if (type === 'details') {
            detailsData.item = item
            console.log('detailsData.item', detailsData.item)
        }
    })
}

/**
 * 提交表单
 */
function submitForm () {
    formRef.value.validate(async valid => {
        if (!valid) return
        detailsData.type === 'add' ? addItem() : updateItem()
    })
}
</script>

<style lang="less">
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.nickname {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}

.flex {
    display: flex;
    .label {
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        display: flex;
        align-items: center;
    }
    .value {
        font-size: 14px;
        display: flex;
        align-items: center;
        line-height: 1;
    }
}

.row {
    margin-bottom: 20px;
}

</style>